﻿@namespace Bit.BlazorUI
@inherits BitComponentBase
@typeparam TItem

<CascadingValue Value="this" IsFixed="true">
    <div style="display:none" hidden>@(Options ?? ChildContent)</div>
</CascadingValue>

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()"
     aria-label="@AriaLabel">

    <div @onclick="CloseCallout" @onclick:stopPropagation
         style="display:@(_isCalloutOpen ? "block" : "none");@Styles?.Overlay"
         class="bit-brc-ovl @Classes?.Overlay"></div>

    <ul style="@Styles?.ItemContainer" class="bit-brc-icn @Classes?.ItemContainer">
        @foreach (var (item, idx) in _displayItems.Select((item, index) => (item, index)))
        {
            <li @key="@GetItemKey(item, idx.ToString())" style="@Styles?.ItemWrapper" class="@Classes?.ItemWrapper">
                @if (idx == _internalOverflowIndex && _overflowItems.Any())
                {
                    <button id="@_overflowAnchorId"
                            type="button"
                            style="@Styles?.OverflowButton"
                            class="bit-brc-obt @Classes?.OverflowButton"
                            aria-label="@OverflowAriaLabel" @onclick="OpenCallout"
                            disabled="@(IsEnabled is false)">
                        @if (OverflowIconTemplate is not null)
                        {
                            @OverflowIconTemplate
                        }
                        else
                        {
                            <i style="@Styles?.OverflowButtonIcon" class="bit-icon bit-icon--@(OverflowIconName ?? "More") @Classes?.OverflowButtonIcon" />
                        }
                    </button>
                }
                else
                {
                    var template = GetTemplate(item);
                    if (GetItemHref(item).HasValue())
                    {
                        <a href="@GetItemHref(item)"
                           aria-current="@(GetIsSelected(item) ? "page" : null)"
                           style="@GetStyles(item, false)"
                           class="bit-brc-itm @GetClasses(item, false)">
                            @if (template is not null)
                            {
                                @template(item)
                            }
                            else if (ItemTemplate is not null)
                            {
                                @ItemTemplate(item)
                            }
                            else
                            {
                                var iconName = GetIconName(item);
                                @if (iconName.HasValue())
                                {
                                    <i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
                                }
                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
                            }
                        </a>
                    }
                    else if (OnItemClick.HasDelegate)
                    {
                        <button type="button"
                                aria-current="@(GetIsSelected(item) ? "page" : null)"
                                disabled="@(GetIsEnabled(item) is false)"
                                style="@GetStyles(item, false)"
                                class="bit-brc-itm @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
                            @if (template is not null)
                            {
                                @template(item)
                            }
                            else if (ItemTemplate is not null)
                            {
                                @ItemTemplate(item)
                            }
                            else
                            {
                                var iconName = GetIconName(item);
                                @if (iconName.HasValue())
                                {
                                    <i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
                                }
                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
                            }
                        </button>
                    }
                    else 
                    {
                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
                              style="@GetStyles(item, false)"
                              class="bit-brc-nii @GetClasses(item, false)">
                            @if (template is not null)
                            {
                                @template(item)
                            }
                            else if (ItemTemplate is not null)
                            {
                                @ItemTemplate(item)
                            }
                            else
                            {
                                var iconName = GetIconName(item);
                                @if (iconName.HasValue())
                                {
                                    <i style="@Styles?.ItemIcon" class="bit-icon bit-icon--@iconName @Classes?.ItemIcon" />
                                }
                                <span style="@Styles?.ItemText" class="@Classes?.ItemText">@GetItemText(item)</span>
                            }
                        </span>
                    }
                }
            </li>

            @if (idx != _displayItems.Count - 1)
            {
                <li style="@Styles?.Divider" class="@Classes?.Divider">
                    @if (DividerIconTemplate is not null)
                    {
                        @DividerIconTemplate
                    }
                    else
                    {
                        <i style="@Styles?.DividerIcon"
                           class="bit-brc-div bit-icon bit-icon--@(DividerIconName ?? "ChevronRight bit-brc-trd") @Classes?.DividerIcon" />
                    }
                </li>
            }
        }
    </ul>

    <div id="@_calloutId"
         tabindex="0"
         role="listbox"
         style="@Styles?.Callout"
         class="bit-brc-cal @Classes?.Callout">
        <ul style="@Styles?.CalloutContainer" id="@_scrollContainerId" class="bit-brc-scn @Classes?.CalloutContainer">
            @foreach (var (item, idx) in _overflowItems.Select((item, idx) => (item, idx)))
            {
                var overflowTemplate = GetOverflowTemplate(item);
                <li @key="@GetItemKey(item, $"overflow-{idx}")" style="@Styles?.OverflowItemWrapper" class="@Classes?.OverflowItemWrapper">
                    @if (GetItemHref(item).HasValue())
                    {
                        <a href="@GetItemHref(item)"
                           aria-current="@(GetIsSelected(item) ? "page" : null)"
                           style="@GetStyles(item, true)"
                           class="bit-brc-ofi @GetClasses(item, true)">
                            @if (overflowTemplate is not null)
                            {
                                @overflowTemplate(item)
                            }
                            else if (OverflowTemplate is not null)
                            {
                                @OverflowTemplate(item)
                            }
                            else
                            {
                                var iconName = GetIconName(item);
                                @if (iconName.HasValue())
                                {
                                    <i style="@Styles?.OverflowItemIcon" class="bit-icon bit-icon--@iconName @Classes?.OverflowItemIcon" />
                                }
                                <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
                            }
                        </a>
                    }
                    else if (OnItemClick.HasDelegate)
                    {
                        <button type="button"
                                aria-current="@(GetIsSelected(item) ? "page" : null)"
                                disabled="@(GetIsEnabled(item) is false)"
                                style="@GetStyles(item, true)"
                                class="bit-brc-ofi @GetClasses(item, true)" @onclick="() => HandleOnItemClick(item)">
                            @if (overflowTemplate is not null)
                            {
                                @overflowTemplate(item)
                            }
                            else if (OverflowTemplate is not null)
                            {
                                @OverflowTemplate(item)
                            }
                            else
                            {
                                var iconName = GetIconName(item);
                                @if (iconName.HasValue())
                                {
                                    <i style="@Styles?.OverflowItemIcon" class="bit-icon bit-icon--@iconName @Classes?.OverflowItemIcon" />
                                }
                                <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
                            }
                        </button>
                    }
                    else
                    {
                        <span aria-current="@(GetIsSelected(item) ? "page" : null)"
                              style="@GetStyles(item, true)"
                              class="bit-brc-ofn @GetClasses(item, true)">
                              @if (overflowTemplate is not null)
                              {
                                  @overflowTemplate(item)
                              }
                              else if (OverflowTemplate is not null)
                              {
                                  @OverflowTemplate(item)
                              }
                              else
                              {
                                  var iconName = GetIconName(item);
                                  @if (iconName.HasValue())
                                  {
                                      <i style="@Styles?.OverflowItemIcon" class="bit-icon bit-icon--@iconName @Classes?.OverflowItemIcon" />
                                  }
                                  <span style="@Styles?.OverflowItemText" class="@Classes?.OverflowItemText">@GetItemText(item)</span>
                              }
                        </span>
                    }
                </li>
            }
        </ul>
    </div>
</div>